<template>
  <el-container class="main_view">
    <el-header>
      <el-menu
        mode="horizontal"
        class="el-menu-demo"
        background-color="#587ab3"
        text-color="#fff"
        active-text-color="#ffd04b"
        unique-opened
        router
        :default-active="$route.path"
        style="border: 0"
      >
        <component
          v-for="value in navList"
          :key="value.url"
          :index="value.url"
          :is="
            value.children && value.children.length > 0
              ? 'el-submenu'
              : 'el-menu-item'
          "
        >
          <template v-if="value.children == null || value.children.length < 0">
            <i :class="'el-icon-' + value.icon" style="color: white"></i>
            <span>{{ value.title }}</span>
          </template>
          <template v-if="value.children && value.children.length > 0">
            <template slot="title"
              ><i :class="'el-icon-' + value.icon" style="color: white"></i>
              <span>{{ value.title }} </span>
            </template>
            <el-menu-item
              v-for="v in value.children"
              :key="v.url"
              :index="v.url"
            >
              <i :class="'el-icon-' + v.icon"></i>
              <span slot="title">{{ v.title }}</span>
            </el-menu-item>
          </template>
        </component>
      </el-menu>
      <div>
        <i class="el-icon-full-screen" @click="toggleFullScreen()" v-if="shows">
        </i>
      </div>
    </el-header>
    <el-main class="main">
      <router-view v-if="isRouterAlive" />
      <!-- <el-table
        :header-cell-style="{ background: '#587ab3', color: '#ffffff' }"
        :row-class-name="tableRowClassName"
        :data="tableData"
        style="border-radius: 10px"
        height="100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          align="center"
          label="日期"
          prop="date"
        ></el-table-column>
        <el-table-column
          align="center"
          label="姓名"
          prop="Name"
        ></el-table-column>
      </el-table> -->
    </el-main>
  </el-container>
</template>

<script>
import { watch } from "vue";
// import formula from "./ScreenView.vue";
export default {
  // components: {
  // formula,
  // },
  data() {
    return {
      isRouterAlive: true,
      shows: true,
      // 侧边栏
      navList: [],
      tableData: [
        { id: 1, date: "2023-02-01", Name: "张三" },
        { id: 2, date: "2023-02-01", Name: "张三" },
        { id: 3, date: "2023-02-01", Name: "张三" },
        { id: 4, date: "2023-02-01", Name: "张三" },
        { id: 5, date: "2023-02-01", Name: "张三" },
      ],
      multipleSelection: [], //选中的数据
    };
  },
  created() {
    let res = {
      success: true,
      data: [
        {
          icon: "house",
          url: "/home",
          title: "首页",
        },
        {
          icon: "document",
          url: "/record",
          title: "记录管理",
        },
        {
          icon: "printer",
          url: "/equipment",
          title: "设备管理",
        },
        {
          icon: "document",
          url: "/personnel",
          title: "人员信息",
        },
        {
          icon: "tickets",
          url: "/post",
          title: "工序信息",
        },
      ],
      msg: "success",
    };
    this.navList = res.data;
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  methods: {
    toggleFullScreen() {
      const elem = document.documentElement;
      // 全屏
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.msRequestFullscreen) {
        // IE11
        elem.msRequestFullscreen();
      }
      this.shows = false;
    },
    tableRowClassName({ row, rowIndex }) {
      //比较的数据(能够区分的数据)
      let arr = this.multipleSelection;
      for (let i = 0; i < arr.length; i++) {
        if (row.id === arr[i]) {
          return "rowStyle";
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.id);
      console.log(this.multipleSelection);
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

<style lang="scss">
.main_view {
  height: 100vh;
  display: flex;
  background-color: #364662;
  .el-header {
    height: 60px;
    margin: 10px;
    margin: 0 10px 10px 10px;
    background-color: #587ab3;
    color: #ffffff;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-main {
    // height: calc(100vh - 60px);
    flex: 1;
    background-color: #587ab3;
    margin: 0 10px 10px 10px;
    padding: 0;
    border-radius: 10px;
    // margin: 0 10px 10px 10px;
  }
}
</style>

<style></style>
